<template>
    <div class="common-page page-user-profile" v-loading.fullscreen="loading">
        <div class="common-page__head">
            <!-- <comp-paths class="route" :paths="['/user', $route.fullPath]"></comp-paths> -->
            <div class="title">{{ $options.title }}</div>
        </div>
        <div class="common-page__body common-form" v-if="profile">
            <div class="rows">
                <div class="row row--head">
                    <div class="name">基本信息</div>
                    <div class="value"></div>
                </div>
                <div class="row">
                    <div class="name">工号</div>
                    <div class="value">{{ profile.number }}</div>
                </div>
                <div class="row">
                    <div class="name">姓名</div>
                    <div class="value">{{ profile.name }}</div>
                </div>
                <div class="row">
                    <div class="name">性别</div>
                    <div class="value">{{ profile.sexText }}</div>
                </div>
                <div class="row">
                    <div class="name">身份证号</div>
                    <div class="value">{{ profile.sequence }}</div>
                </div>
                <div class="row">
                    <div class="name">角色</div>
                    <div class="value">{{ profile.roleText }}</div>
                </div>
                <div class="row">
                    <div class="name">冻结状态</div>
                    <div class="value">
                        <span class="el-status--danger" v-if="profile.banned === 'yes'"></span>
                        <span class="el-status--success" v-else-if="profile.banned === 'not'"></span>
                        <span>{{ profile.bannedText }}</span>
                    </div>
                </div>
                <div class="row">
                    <div class="name">注册时间</div>
                    <div class="value">{{ profile.createdAt }}</div>
                </div>
                <div class="row">
                    <div class="name">最近登录时间</div>
                    <div class="value">{{ profile.lastLoginAt }}</div>
                </div>
                <div class="row">
                    <div class="name">最近活跃时间</div>
                    <div class="value">{{ profile.lastActiveAt }}</div>
                </div>
                <div class="row row--picture">
                    <img class="value" :src="profile.avatar" v-if="profile.avatar" />
                    <img class="value" :src="require('../assets/user-avatar.png')" v-else />
                </div>
            </div>
            <div class="rows">
                <div class="row row--head">
                    <div class="name">安全信息</div>
                    <div class="value"></div>
                </div>
                <div class="row">
                    <div class="name">手机号</div>
                    <div class="value">{{ profile.mobile }}</div>
                </div>
                <div class="row">
                    <div class="name">登录密码</div>
                    <div class="value">********</div>
                </div>
            </div>
            <div class="rows">
                <div class="row row--head">
                    <div class="name">应用授权信息</div>
                    <div class="value"></div>
                </div>
                <div class="row row--3x">
                    <div class="name">授权应用</div>
                    <div class="value">{{ profile.nodesText }}</div>
                </div>
            </div>
            <div class="rows">
                <div class="row row--head">
                    <div class="name">所属部门信息</div>
                    <div class="value"></div>
                </div>
                <div class="row row--2x">
                    <div class="value">
                        <el-table size="medium" border :data="profile.depments">
                            <el-table-column label="部门" min-width="160">
                                <template #default="scope">{{ scope.row.dept.name }}</template>
                            </el-table-column>
                            <el-table-column label="身份" width="120">
                                <template #default="scope">{{ scope.row.roleText }}</template>
                            </el-table-column>
                            <el-table-column label="管理员" width="120">
                                <template #default="scope">{{ scope.row.primaryText }}</template>
                            </el-table-column>
                            <el-table-column label="职务" width="120">
                                <template #default="scope">{{ scope.row.duty || "-" }}</template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import mixin from "../mixin";
    import { string, int } from "../util";
    export default {
        name: "page-user-profile",
        title: "个人信息",
        nodes: [],
        childs: [],
        mixins: [mixin],
        data: () => ({
            loading: false,
        }),
        methods: {
            destroy() {
                if (this.loading) return;
                return true;
            },
            init() {
                if (this.loading) return;
                this.loading = true;
                this.$root.$refs.navbar.init();
                this.plugins.user.call(async () => {
                    let res = await this.plugins.user.init();
                    if (res.code === 0) { }
                    return res;
                }, async () => {
                    if (this.access(this.$route.name)) return { code: 0 };
                    return this.env.xhrErrors.find((error) => error.code === 4);
                }).then((res) => {
                    this.loading = false;
                    this.$root.$refs.navbar.init();
                    if (res.code === 0) {

                    } else if (res.code === 2) {
                        this.$root.$refs.navbar.login();
                    } else {
                        this.plugins.modal.alert("页面加载失败", res.code + "：" + res.msg, "error").then(() => this.$router.replace("/home"));
                    }
                });
            },
        },
    };
</script>

<style lang="scss">
    .page-user-profile {
        overflow: hidden;
    }
</style>